import React, { useState } from 'react';
import { connect } from 'react-redux';
import { View, Button, Image, Text } from '@tarojs/components';
import sighBlue from '@/giftCardSubPack/images/giftCard/sighBlue.png';
import rightBlue from '@/giftCardSubPack/images/giftCard/rightBlue.svg';
import right from '@/images/common/rightBlack.svg';
import close from '@/giftCardSubPack/images/giftCard/close.png';
import './index.scss';

const InvoiceRecord = ({}) => {
  const [activeMall, setActiveMall] = useState(true);
  const [activeSelf, setActiveSelf] = useState(false);
  const [layoutFlag, setLayoutFlag] = useState(false);
  const mall = () => {
    setActiveMall(true);
    setActiveSelf(false);
  };
  const self = () => {
    setActiveMall(false);
    setActiveSelf(true);
  };
  const layourt = () => {
    setLayoutFlag(true);
  };
  const closeLayout = () => {
    setLayoutFlag(false);
  };
  const invoiceList = () => {
    const children = [];
    const arr = [1, 2, 3, 4, 5, 6, 7, 8];
    arr.map((item) => {
      children.push(
        <View className="box" key={item}>
          <View className="top">
            <Text className="left">江苏金服数字科技有限公司</Text>
            <Text className="right">￥66.6</Text>
          </View>
          <View className="botto">
            <View className="left">
              <View className="item">
                <Text className="text">发票类型：</Text>
                <Text className="text">电子普通发票</Text>
              </View>
              <View className="item">
                <Text className="text">纳税人识别号：</Text>
                <Text className="text">212233231121</Text>
              </View>
              <View className="item">
                <Text className="text">开票时间：</Text>
                <Text className="text">2020年8月9日 18:11:20</Text>
              </View>
            </View>
            <View className="right">
              <Image src={right} className="sighRed" />
            </View>
          </View>
        </View>,
      );
    });
    return children;
  };
  return (
    <View className="wrap">
      <View className="description">
        <Image src={sighBlue} className="sighRed" />
        <Text className="text">发票说明</Text>
        <Image src={rightBlue} className="avatar" onClick={layourt} />
      </View>
      <View className="btnBox">
        <Button className={!activeMall ? 'btn left' : 'btn left active'} onClick={mall}>
          发票记录
        </Button>
        <Button className={!activeSelf ? 'btn' : 'btn active'} onClick={self}>
          发票抬头
        </Button>
      </View>
      <View className="invoiceList">{invoiceList()}</View>
      {layoutFlag && (
        <View className="atFloatLayout">
          <View className="layoutBox">
            <Image src={close} className="sighRed" onClick={closeLayout} />
            <Text className="tit">发票说明</Text>
            <Text className="text">
              1.通过银行卡（包括信用卡和借记卡）和网上支付平台（包括支付宝和微信支付）支付的费用，可用于开具发票。以代金券、优惠券或营销活动支付或冲抵的费用，恕不能开具发票。
            </Text>
            <Text className="text"> 2.您可以在【确认订单】时，提交开票需求。</Text>
            <Text className="text">
              3.我们开具经主管税务机关批准的增值税电子普通发票。根据税务法律法规规定，如需要纸质发票，客户可以自行打印增值税电子普通发票的PDF版式文件。增值税电子普通发票打印后，其法律效力、基本用途、基本使用规定等于税务机关监制的增值税普通发票相同。
            </Text>
            <Text className="text">
              {' '}
              4.如购买方为企业的，除发票抬头填写全称外，还需提供准确的纳税人识别号或统一社会信用代码，以免无法正常报销。
            </Text>
          </View>
        </View>
      )}
    </View>
  );
};
export default connect(({}) => ({}))(InvoiceRecord);
